<template>
<div>

<fieldset  class="scheduler-border">
  <legend class="scheduler-border" style=" margin-bottom:5px;text-align: center;">编辑节目信息</legend>
  <div>
	  <div style="color: red;font-size: 16px;text-align: center;" id="error"></div>
  <div class="col-md-12" style="padding-right:0px;padding-left:0px;">
  <div class="col-md-3" style="padding-right:0px;padding-left:0px;">
  <ul class="nav nav-pills" id="materialinfo" style="background-color: #F7F7F7;top:50px;padding-left: 15px;margin-left: 0px;">
  <!-- <li role="presentation" class=""><a href="javacript:void(0);" ><img src="static/img/字体.png" style="width:36px" class="img-rounded"><br/><b>&nbsp;字幕</b></a></li>!-->
  <li role="presentation"><a><img src="static/img/wb.png" style="width:36px" class="img-rounded"><br/><b>&nbsp;文本</b></a></li>
 <li role="presentation"><a><img src="static/img/tp.png" style="width:36px" class="img-rounded"><br/><b>&nbsp;图片</b></a></li>
    <li role="presentation"><a><img src="static/img/sp.png" style="width:36px" class="img-rounded" title="一个节目只能有一个分区上传一个gif,否则容易出现问题"><br/><b>&nbsp;动画</b></a></li>
</ul>	
<ul class="nav nav-pills nav-stacked" id="material"  style="background-color:#ffffff;height:340px;overflow:auto;margin-left: 0px;">
	<div class="panel panel-primary"  style="margin-bottom: 0px">
    <div class="panel-heading">
        <h3 class="panel-title"><img src="static/img/shou.png" class="img-rounded" style="width: 30px;">节目信息</h3>
    </div>
</div>
  <!-- <li><a href="javacript:void(0);">SVN</a></li>
    <li><a href="javacript:void(0);">iOS</a></li>
    <li><a href="javacript:void(0);">VB.Net</a></li>
    <li><a href="javacript:void(0);">Java</a></li>
    <li><a href="javacript:void(0);">PHP</a></li>1-->
</ul>
  </div>
  <div class="col-md-9"   style="border:1px solid #428bca;border-bottom:none;border-right:none;border-right:none;padding-left:0px;padding-right:0px;">
 
 <div id="splitscreen" style="height:190px;background:#CDD3CA;overflow:auto;">
	      <div   tabindex="0" onblur='onblurdiv()' style="width:516px;height:190px;background-color: #413d3d;position:relative;margin:auto;overflow:hidden;z-index: 100;" id="program">
       

     
			
</div>
</div><canvas id="screen_size"  style="position: absolute;z-index:0;"></canvas>
<br>
<div id="zoom" style="position: absolute;"><img src="static/img/fa.png" style=" width: 26px;
  "/><img src="static/img/sx.png" style="width: 26px;  display: none;"/><span style="color: red;" id="zoomsum">0</span>
</div>   
 <center><button type="button" id="addfq" class="btn btn-primary">保存</button></center>

<fieldset  class="scheduler-border" style="border:none;border-top: 1px solid rgb(66, 139, 202);display: none;">
  
    <legend class="scheduler-border" style=" margin-bottom: 0px"> 分区信息</legend>

  <form class="form-inline" role="forms" style="display:none">
        
   	 <input type="hidden" id="lineheight" value="1.2"/>
	 <input type="hidden" id="index"/>
	 <input type="hidden" id="FTPurl"/>
   	 <input type="hidden" id="size"/>   
      <input type="hidden" id="txtpath"/> 
      	 <input type="hidden" id="materialid"/>
        <input type="hidden" id="txt"/> 
<!--	<div class="form-group col-md-3" style="display: none;">
		<label for="name" class="control-label">分区号</label>
	<input type="text" class="form-control" id="zeroindex"  placeholder="请输入分区号">
	</div>!-->
<div class="form-group col-sm-3">
		<label for="name" class="control-label">分区类型&emsp;&emsp;&ensp;&emsp; &thinsp; &zwnj;&zwj;</label>
<select id="type"  style="width:196px" class="form-control">
	<option value="0">文字分区</option>
	<option value="1">图片分区</option>
	<option value="2">动画分区</option>
	</select>
	</div>
		<!-- <div class="form-group col-sm-3" style="display: none">
		<label for="name" class="control-label">
          <p>文本&ensp;
&emsp;
&thinsp;
&zwnj;
&zwj;</p>
    </label>
<select title="" style="width:196px"  id="texttype" class="form-control">
 <option value="1" selected>电脑字体</option>
   <option value="0" >文字</option></select>
	</div> -->


		<div class="form-group col-sm-3" style="display: none">
		<label for="name" class="control-label">文本对齐&ensp;&emsp; &thinsp; &zwnj;&zwj;</label>
<select title="" style="width:196px"  id="alignment" class="form-control">
 <!-- <option value="0" >左对齐</option>
   <option value="1" >右对齐</option>
   <option value="2" >居中对齐</option>
    <option value="3" >上下对齐</option>!-->
    <option value="0">居上</option>
      <option value="1">垂直居中</option>
        <option value="2">居下</option>
   </select>

	</div>

	<div class="form-group col-sm-3">
		<label for="name" class="control-label">左边起始位置&ensp;&emsp; &thinsp; &zwnj;&zwj;</label>
<!--<input type="number" class="form-control" id="left" value="0"  placeholder="请输入左边起始位置"  min="0" max="1000" step="8" style="width:196px"/>-->

<div class="input-group spinner">  
    <input type="text" class="form-control"  onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" id="left" placeholder="请输入左边起始位置" value="0">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>

	</div>
   <div class="form-group col-sm-3">
		<label for="name" class="control-label">顶端起始位置&ensp; &emsp; &thinsp; &zwnj;&zwj;</label>
<!-- <input type="number" class="form-control" id="top" value="0"  placeholder="请输入顶端起始位置" min="0" max="1000" step="0" style="width:196px"/>!-->

<div class="input-group spinner">  
    <input type="text" class="form-control" id="top"  onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" placeholder="请输入顶端起始位置" value="0">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>

	</div>
      <div class="form-group col-sm-3" >
		<label for="name" class="control-label">宽度&ensp;
&emsp;
&thinsp;
&zwnj;&ensp; &emsp; &thinsp; &zwnj;&zwj;
&zwnj;</label>
<!--	<input type="number" class="form-control" value="516" step="8" id="width"   style="width:196px"
				   placeholder="请输入宽度">!-->
<div class="input-group spinner">  
    <input type="text" class="form-control" id="width"   onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" placeholder="请输入宽度" value="516">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>

	</div>
    <div class="form-group col-sm-3"  >
		<label for="name" class="control-label">高度&ensp;
&emsp;
&thinsp;
&zwnj;
&zwnj;&ensp; &emsp; &thinsp; &zwnj;&zwj;
</label>
<!--	<input type="number" class="form-control" id="high"  value="190"  style="width:196px"
				   placeholder="请输入高度">!-->
<div class="input-group spinner">  
    <input type="text" class="form-control"  onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" id="high" placeholder="请输入高度" value="190">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>

	</div>
   <div class="form-group col-sm-3">
		<label for="name" class="control-label">进入方式&ensp;
&emsp;
&thinsp;
&zwnj;&ensp; &emsp; &thinsp; &zwnj;&zwj;
&zwnj;</label>
	<!--<input type="text" class="form-control" id="intype" 
				   placeholder="请输入进入方式">!-->
        	<!-- <select class="form-control" id="intype" style="width:196px">
									<option value="0">连续左移</option>	
										<option value="1">连续右移</option>	
											<option value="2">向左移入</option>	
												<option value="3">向右移入</option>
													<option value="4">向上移入</option>	
													<option value="5">向下移入</option>	
							</select>!-->

      <select id="intype" class="form-control" style="width:196px">
              <!-- <option value="0">随机显示</option> -->
							<option value="1" >静止显示</option>
							<option value="2" selected="selected">连续左移</option>
              <option value="3">连续右移</option>						
            	<option value="4">连续上移</option>							
              <option value="5">连续下移</option>											
            	<option value="6">向左移入</option>
              <option value="7">向右移入</option>		
              <option value="8">向上移入</option>	
              <option value="9">向下移入</option>	                  
              <option value="10">从右向左展开</option>			
              <option value="11">从左向右展开</option>	
            <option value="12">从下向上展开</option>	
            <option value="13">从上向下展开</option>	
            <!-- <option value="14">从中间向左右展开</option>	 -->
            <!-- <option value="15">从中间向左右展开</option>	 -->
            <option value="16">从上下向中间展开</option>	
            <option value="17">从左右向中间展开</option>	
            <!-- <option value="18">闪烁</option>	 -->
            <!-- <option value="19">穿插</option>	 -->
            <!-- <option value="20">从上向下飘雪</option>	
            <option value="21">从下向上飘雪</option>	 -->
            <!-- <option value="22">从下向上镭射</option>
            <option value="23">从上向下镭射</option> -->
            <!-- <option value="24">从右向左镭射</option> -->
            <!-- <option value="25">从左向右镭射</option> -->
            <!-- <option value="26">从下向上拉伸</option>
            <option value="27">从上向下拉伸</option>
            <option value="28">从右向左拉伸</option>
            <option value="29">从左向右拉伸</option> -->
            <!-- <option value="30">从下向上百叶窗</option>
            <option value="31">从上向下百叶窗</option>
            <option value="32">从左向右百叶窗</option>
            <option value="33">从右向左百叶窗</option> -->
            <!-- <option value="34">从中间向左右扇形展开</option>
            <option value="35">从左右向中间扇形关闭</option> -->
            <!-- <option value="36">向左旋90度</option>
            <option value="37">向右旋90度</option> -->
            <!-- <option value="38">向左旋180度</option>
            <option value="39">向右旋180度</option>
            <option value="40">向左旋360度</option>
            <option value="41">向右旋360度</option> -->
            <!-- <option value="42">从左上角覆盖</option>
            <option value="43">从右上角覆盖</option>
            <option value="44">从左下角覆盖</option>
            <option value="45">从右下角覆盖</option>
            <option value="46">十字向内</option>
            <option value="47">十字向外</option> -->
            <!-- <option value="48">菱形向内</option>
            <option value="49">菱形向外</option> -->
		
            </select>


	</div>
      <div class="form-group col-sm-3">
		<label for="name" class="control-label"  id="inText">进入速度&ensp;
&emsp;
&thinsp;&ensp; &emsp; &thinsp; &zwnj;&zwj;
&zwnj;</label>
	<!--<input type="number" class="form-control" id="inspeed" 
				   placeholder="请输入进入速度">!-->
<div class="input-group spinner">  
    <input type="text" class="form-control" maxlength="3" onkeyup="inspeedOnkeup(this)"  id="inspeed" placeholder="请输入进入速度" value="1">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>
	</div>
        <div class="form-group col-sm-3" style="display: none;">
		<label for="name" class="control-label">字体颜色</label>
	<!--<input type="text" class="form-control" id="fontcolor" 
				   placeholder="请输入字体颜色">!-->

<select name="fontcolor" id="fontcolor123" class="form-control"  style="width:196px">
						<option value="red">红色</option>
						<option value="green">绿色</option>
						<option value="yellow">黄色</option>
						<option value="blue">蓝色</option>
						<option value="purple">紫色</option>
						<option value="cyan">青色</option>
						<option value="white">白色</option>
					</select>


	</div>

   <div class="form-group col-sm-4" style="display: none;"> 
		<label for="name" class="control-label">背景颜色</label>
 <select name="backcolor" id="backcolor" class="form-control"  style="width:196px">
            <option value="black">黑色</option>
						<option value="red">红色</option>
						<option value="green">绿色</option>
						<option value="yellow">黄色</option>
						<option value="blue">蓝色</option>
						<option value="purple">紫色</option>
						<option value="cyan">青色</option>
						<option value="white">白色</option>
					</select>

	</div>
	   <div class="form-group col-sm-3">
		<label for="name" class="control-label">停留时间&ensp;
&emsp;
&thinsp;
&ensp;&ensp;&emsp; &thinsp; &zwnj;&zwj;
&zwnj;</label>
	<!--	<input type="number" class="form-control" value="0" id="staytime" placeholder="请输入停留时间" min="0" max="1000" step="0" style="width:196px"/>!-->


<div class="input-group spinner">  
    <input type="text" class="form-control" id="staytime" maxlength="3"  onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" placeholder="请输入停留时间" value="1">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>

	</div>

 <div class="form-group col-sm-3" id="fontcolordiv" style="display: none;">
		<label for="name" class="control-label">字体颜色
      &ensp;
&emsp;
&thinsp;
&zwnj;&ensp; &emsp; &thinsp; &zwnj;&zwj;
    </label>
	<!--<input type="text" class="form-control" id="fontcolor" 
				   placeholder="请输入字体颜色">!-->
  

<select name="fontcolor" id="fontcolor" class="form-control"   style="width:196px">
						<option value="red">红色</option>
						<option value="green">绿色</option>
						<option value="yellow">黄色</option>
						<option value="blue">蓝色</option>
						<option value="purple">紫色</option>
						<option value="cyan">青色</option>
						<option value="white">白色</option>
					</select>



	</div>
       <div class="form-group col-sm-3" id="fontsizediv"  style="display: none;">
		<label for="name" class="control-label">字体大小
      &ensp;
&emsp;
&thinsp;
&zwnj;&ensp; &emsp; &thinsp; &zwnj;&zwj;
    </label>
				   <select id="fontsizeadd" style="width:196px" class="form-control">
                <option value="4">12*12</option>
					  <option value="1" selected>16*16</option>
					     <option value="2">24*24</option>
					    <option value="3">32*32</option>
						<!-- <option value="5">48*48</option>
						<option value="6">64*64</option> -->
				   </select>
	</div>
  <div class="form-group col-sm-3" style="display:none">
		<label for="name" class="control-label">字体
    &ensp;
&emsp;
&thinsp;
&zwnj;
&zwj;&ensp; &emsp; &thinsp; &zwnj;&zwj;
</label>
				   <select id="typefaceval" style="width:196px" class="form-control"  >
             <!-- <option value="" id="-1">点阵</option> -->
             <option value="4" id="4">炫彩</option>
					   <!-- <option value="SimSun" id="0" style="display: none;">宋体</option> -->
             <!-- <option value="FangSong" id="1">仿体</option>
              <option value="微软雅黑" id="2">微软雅黑</option>
              <option value="LiSu" id="5">隶书</option>
              <option value="SimHei" id="6">黑体</option> -->
            
				   </select>
	</div>

 <div class="form-group col-sm-3" style="display:;">
		<label for="name" class="control-label">炫彩效果 &ensp;
&emsp;
&thinsp;
&zwnj;&ensp; &emsp; &thinsp; &zwnj;&zwj;</label>
				   <select id="Dazzle" style="width:196px" class="form-control"  >
					    <option value="0">无效果</option>
				   </select>
	</div>
 <div class="form-group col-sm-3" style="float: left;display: none;">
		<label for="name" class="control-label">字体特效&ensp;
&emsp;
&thinsp;
&zwnj;
&zwj;</label>
				   <select id="randomFontColor" style="width:196px" class="form-control"  >
             <option value="0" id="0">无</option>
					   <option value="1" id="1">一字一色</option>
             <option value="2" id="2">二字一色</option>
              <option value="3" id="3">三字一色</option>
              <option value="4" id="4">四字一色</option>
				   </select>
	</div>
 

<div class="form-group col-sm-3" style="display:">
		<label for="name" class="control-label">编辑方式&ensp;&emsp;&thinsp;&zwnj;&zwj;&ensp;&emsp;&thinsp;&zwnj;&zwj;</label>
<select title="" style="width:196px"  id="texttype" class="form-control">
   <option value="0">简单编辑</option>
  <option value="1">Word编辑</option>
  </select>
	</div>
    <div class="form-group col-md-12">
        <!-- <div id="container" name="container"></div> -->
        <!--   <UEditor :config=config ref="ueditor123" ></UEditor>!-->
        <!-- 电脑字体 -->
          <div id="text_pic_form" class="play_item_form" style="display:none">
            <div class="col2"><input type="hidden" id="imgDataURL">
                    <div class="rich_text">
                        <div class="form-group set">
                            <div class="btn-group w-10">
                                <button type="button" class="btn text-family"></button>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret" style="margin-top: 0px;border-top-color: #131313;"></span>
                                </button>
                                <ul class="dropdown-menu drop_font2" style=" height: 160px;">
                                </ul>
                            </div>
                            <div class="btn-group w-9 text-color">
                                    <button type="button" class="btn"><span class="c255"></span>红色</button>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret" style="margin-top: 0px;border-top-color: #131313;"></span>
                                </button>
                                <ul class="dropdown-menu drop_color2"><li><a val="255"><span class="c255"></span>红色</a></li><li><a val="65280"><span class="c65280"></span>绿色</a></li><li><a val="65535"><span class="c65535"></span>黄色</a></li><li><a val="16711680"><span class="c16711680"></span>蓝色</a></li><li><a val="16711935"><span class="c16711935"></span>紫色</a></li><li><a val="16776960"><span class="c16776960"></span>青色</a></li><li><a val="16777215"><span class="c16777215"></span>白色</a></li></ul>
                            </div>
                            <div class="btn-group w-6 text-size">
                                <button type="button" class="btn" val=16>16</button>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                    <span class="caret" style="margin-top: 0px;border-top-color: #131313;"></span>
                                </button>
                                <ul class="dropdown-menu drop_fontsize2"><li><a val="12">12</a></li><li><a val="13">13</a></li><li><a val="14">14</a></li><li><a val="15">15</a></li><li><a val="16">16</a></li><li><a val="17">17</a></li><li><a val="18">18</a></li><li><a val="19">19</a></li><li><a val="20">20</a></li><li><a val="21">21</a></li><li><a val="22">22</a></li><li><a val="23">23</a></li><li><a val="24">24</a></li><li><a val="25">25</a></li><li><a val="26">26</a></li><li><a val="27">27</a></li><li><a val="28">28</a></li><li><a val="29">29</a></li><li><a val="30">30</a></li><li><a val="31">31</a></li><li><a val="32">32</a></li><li><a val="33">33</a></li><li><a val="34">34</a></li><li><a val="35">35</a></li><li><a val="36">36</a></li><li><a val="37">37</a></li><li><a val="38">38</a></li><li><a val="39">39</a></li><li><a val="40">40</a></li><li><a val="41">41</a></li><li><a val="42">42</a></li><li><a val="43">43</a></li><li><a val="44">44</a></li><li><a val="45">45</a></li><li><a val="46">46</a></li><li><a val="47">47</a></li><li><a val="48">48</a></li><li><a val="49">49</a></li><li><a val="50">50</a></li><li><a val="51">51</a></li><li><a val="52">52</a></li><li><a val="53">53</a></li><li><a val="54">54</a></li><li><a val="55">55</a></li><li><a val="56">56</a></li><li><a val="57">57</a></li><li><a val="58">58</a></li><li><a val="59">59</a></li><li><a val="60">60</a></li><li><a val="61">61</a></li><li><a val="62">62</a></li><li><a val="63">63</a></li><li><a val="63.9">64</a></li></ul>
                            </div>
                        </div>
                        <div class="input-text">
                            <div id="editor" contenteditable="true" style="height:115px" ondragstart="return false;"> </div>
                            <textarea class="textarea" style="height:70px; top:180px;"></textarea>
                            <span class="text-length"> <span id="textCount">已输入0字</span></span>
                            </div>
                        </div>
                        <br>
                      
                        <canvas id="mycanvasadd" class="mycanvas" width="144" height="24" style="display:none">不支持！</canvas>
                    </div>
                 
</div>
		<textarea rows="3" id="fosizeval" style="display: none;width:100%" cols="120" placeholder="输入文本内容" class="form-control" ></textarea>
	</div>
<div class="form-group col-sm-10" style="display: none;" id="imgadd">
	<label for="name" class="control-label">上传图片</label>
    <!--  <input type="file" id="file1"  name="file" accept="image/jpeg,image/jpg,image/png"/>!-->
   <article>
   <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" style="display: none;" accept="image/jpeg,image/jpg,image/png" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
            <input type="hidden" id="hfile1"/>   
            <input type="hidden" id="pathimg"/>  
            <input type="hidden" id="FTPurldele"/>
            <input type="hidden" id="pathsize"/> 
              <input type="hidden" id="materialid"/> 
          <input type="hidden" id="advancedid"/>   
   <input type="hidden" id="fileId"/>  
            </div>
 <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" style="display: none;" accept="image/jpeg,image/jpg,image/png" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      
            <input type="hidden" id="hfile1"/>   
            <input type="hidden" id="pathimg"/>
            <input type="hidden" id="FTPurldele"/>
            <input type="hidden" id="pathsize"/>  <input type="hidden" id="materialid"/> 
               <input type="hidden" id="fileId"/>  
            </div>


        <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" style="display: none;" accept="image/jpeg,image/jpg,image/png" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
            <input type="hidden" id="hfile1"/>   
            <input type="hidden" id="pathimg"/>
            <input type="hidden" id="FTPurldele"/>
            <input type="hidden" id="pathsize"/>  <input type="hidden" id="materialid"/> 
               <input type="hidden" id="fileId"/>  
            </div>

             <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" style="display: none;" accept="image/jpeg,image/jpg,image/png" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      
            <input type="hidden" id="hfile1"/>
            <input type="hidden" id="pathimg"/>
            <input type="hidden" id="FTPurldele"/>
            <input type="hidden" id="pathsize"/>  <input type="hidden" id="materialid"/> 
               <input type="hidden" id="fileId"/>  
            </div>

             <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" style="display: none;" accept="image/jpeg,image/jpg,image/png" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      
             <input type="hidden" id="hfile1"/> 
             <input type="hidden" id="pathimg"/>
             <input type="hidden" id="FTPurldele"/>
             <input type="hidden" id="pathsize"/>  <input type="hidden" id="materialid"/> 
                <input type="hidden" id="fileId"/>  
            </div>

             <!-- <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" style="display: none;" accept="image/jpeg,image/jpg,image/png" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      
            <input type="hidden" id="hfile1"/>   
             <input type="hidden" id="pathimg"/> 
              <input type="hidden" id="pathsize"/>  <input type="hidden" id="materialid"/> 
                 <input type="hidden" id="fileId"/>  
            </div> -->


      </article>
	</div>
    <div class="form-group col-sm-10" style="display: none;" id="imgaddgif">
	<label for="name" class="control-label">上传动画</label>
     <!-- <input type="file" id="file2" name="file" accept="image/gif" />
 <input type="hidden" id="hfile2"/>!-->
  <article>
   <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" style="display: none;" accept="image/gif" onChange="previewgif(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImggif(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      
            <input type="hidden" id="hfile2"/> 
            <input type="hidden" id="pathimggif"/> 
           <input type="hidden" id="pathgifsize"/> 
           <input type="hidden" id="materialid"/> 
            <input type="hidden" id="fileId"/>  
            <input type="hidden" id="FTPurlgif"/>
           <input type="hidden" id="gifwidepth"/> 
            </div>

<!-- gig -->
 

      </article>


	</div>

<div class="form-group col-sm-9">


	</div>

</form>    

</fieldset>

<fieldset  id="fqfrom"  class="scheduler-border" style="border:none;border-top: 1px solid rgb(66, 139, 202)">

  <legend class="scheduler-border" style=" margin-bottom: 0px"> 节目信息</legend>

<form class="form-inline" id="cssfrom" role="form">

  <br/>
    <div class="form-group" style="display: none;">
		<label for="name" class="control-label">宽度</label>
	<!--<input type="number" class="form-control" value="516" step="8" id="jwidth" 
				   placeholder="请输入宽度">!-->

 <div class="input-group spinner" style="margin-bottom: 0px;">  
    <input type="text" class="form-control" id="jwidth"   onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" placeholder="请输入宽度" value="516">  
    <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  </div>  

	</div>

    <div class="form-group" style="display: none;">
		<label for="name" class="control-label">高度&nbsp;&nbsp;</label>
	<!--<input type="number" class="form-control" value="190" id="jhigh" 
				   placeholder="请输入高度">!-->
				   <div class="input-group spinner" style="margin-bottom: 0px;">  
        <input type="text" class="form-control"  onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" id="jhigh" placeholder="请输入高度" value="190">  
   <div class="input-group-btn-vertical">  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>  
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>  
    </div>  
  
	</div>

	</div>

<div class="form-group" style="display: none;">
		<label for="name" class="control-label">订单&nbsp;&nbsp;</label>
	<input type="text" class="form-control" readonly="readonly" id="order" 
				   placeholder="请选择订单"  value="1">
	</div>
	<div class="form-group">
		<label for="name" class="control-label">节目号</label>
	<input type="text" class="form-control" id="programid" style="width: 120px;" value=""
				  disabled="disabled">
	</div>

	<div class="form-group">
		<label for="name" class="control-label">节目名称</label>
	<input type="text" class="form-control" id="festivalname" 
				   placeholder="请输入节目名称" maxlength="20">
	</div>
	<div class="form-group" style="display: none;">
<label for="name" class="control-label">设备类型</label>
<select title="" id="devicetype" class="form-control" style="width:130px;" >
  <option value="0">单色</option> 
  <option value="1">双色</option>
  <option value="2">全彩</option> 
  <option value="3">安卓</option>
	</select>
	</div>
	<div class="form-group">
     <label for="firstname" class="control-label">节目类型</label>
		<select title="" class="form-control" id="typejm"  style="width:130px;" >
			<!-- <option value="0">公益广告</option> 
			<option value="1">商业广告</option> -->
			<option value="2">即时节目</option>
			<option value="3" selected>固定节目</option>
			</select>
		<!--<input type="text" class="form-control" id="name" 
			   placeholder="请输入名称">!-->
	</div>
		<div class="form-group" title="节目名称为播放的内容">
		<label for="name" class="control-label">播放语音</label>
<select  id="isplayvoice" class="form-control" style="width:110px;"><option value="1">开启</option> <option value="0">关闭</option></select>
	</div>

	<div class="form-group" >
		<label for="name" class="control-label">播放类型</label>
<select title="" id="playtype" class="form-control"  style="width:110px;" >
	<option value="0">次数</option> 
	<option value="1">时间</option>
	</select>
	</div>

<div class="form-group" style="display:none">
		<label for="playhour" class="control-label">时间(s)</label>
	<input type="text" class="form-control" id="playhour" style="width:90px">
	</div>

	<div class="form-group">
		<label for="name" class="control-label">次数</label>
<select title="" id="playtime" class="form-control"><option value="255" >255</option></select>
	</div>
	<div class="form-group" style="display:;">
		<label for="name" class="control-label">播放日期</label>
	<input type="text" style="width:120px" class="date_picker input form-control" id="starttime" autocomplete="off" onfocus=this.blur()
				   placeholder="请输入播放起始日期">
           
	</div>
		<div class="form-group" style="display:;">
<span style="font-size: 18px;">~</span>
	<input type="text" style="width:120px" class="date_picker input form-control"  id="endtime"  autocomplete="off" onfocus=this.blur()
				   placeholder="请输入播放结束日期" >

				   
	</div>
	<div class="form-group" style="margin-bottom: 0px;display:none">
		<label for="name"   class="control-label">开始时间段</label>

<!--<select title="" id="timeid" class="form-control" style="width:196px">
</select>-->
<input type="text" id="timeid" style="width:120px"  class="time form-control" placeholder="请输入开始时间段" />

	</div>
		<div class="form-group" style="margin-bottom: 0px;display:none">
		<label for="name" class="control-label">结束时间段</label>

	
		<!--	<select title="" id="starthour" class="form-control" style="width:196px">
</select>!-->
<input type="text" id="starthour"  style="width:120px"  autocomplete="off" class="form-control time" placeholder="请输入结束时间段"/>
	</div>
  <div class="form-group">
                  <input type="checkbox" id="highTime"/>
                  <label class="css-label">时段信息扩展</label>
                 
                </div>
               <div  class="form-group" style="height:41px;display:none">
                   <label class="control-label" style="padding-top:10px;">星期&nbsp;&nbsp;</label>
                  <week></week>
                </div>

                 <div class="form-group" style="padding-left: 28px;display:none">
                  <label>时间个数</label>

                  <select
                    class="form-control"
                    id="liveCount"
                    style="width:57px"
                    onchange="timeChange()"
                  >
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                  </select>
                </div>

                <!-- 播放时段 -->
                 <div class="form-group" style="margin:20px 0px;display:none">
                  <table id="liveTime">
                    <tr>
                      <td>
                        <label>开始1</label>
                      </td>
                      <td>
                        <div id="liveStart1" liveId="" class="time"></div>
                       
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd1" class="time"></div>
                      </td>
                       <td>
                        <label>开始2</label>
                      </td>
                      <td>
                        <div id="liveStart2" liveId="" class="time"></div>
                         
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd2" class="time"></div>

                      </td>
                      <td>
                        <label>开始3</label>
                      </td>
                       <td>
                        <div id="liveStart3" liveId="" class="time"></div>
                         
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd3" class="time"></div>
                      </td>
                      <td>
                        <label>开始4</label>
                      </td>
                      <td>
                        <div id="liveStart4" liveId="" class="time"></div>
                         
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd4" class="time"></div>
                      </td>
                      </tr>
                    <tr>
                      <td>
                        <label>开始5</label>
                      </td>
                      <td>
                        <div id="liveStart5" liveId="" class="time"></div>
                        
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd5"  class="time"></div>
                      </td>

                      <td>
                        <label>开始6</label>
                      </td>
                      <td>
                        <div id="liveStart6" liveId="" class="time"></div>
                         
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd6" class="time"></div>
                      </td>
                      <td>
                        <label>开始7</label>
                      </td>
                      <td>
                        <div id="liveStart7" liveId="" class="time"></div>
                         
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd7" class="time"></div>
                      </td>
                      <td>
                        <label>开始8</label>
                      </td>
                      <td>
                        <div id="liveStart8" liveId="" class="time"></div>
                         
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd8"  class="time"></div>
                      </td>
                    </tr>
                  </table>
                </div>
	

</form>
 <br>
  <br>
  </fieldset>
</div>


<!-- 323232!-->
  </div>

</div>
  </fieldset>
  <center> 
    
 <!--    <button type="button" class="btn btn-primary" id="addjm">保存</button>!-->


  </center> 
 <button type="button" class="btn btn-info" id="fsopen" style="display:none"  data-toggle="modal" data-target="#myModal">发送</button>
<button type="button" id="selectxc" data-toggle="modal" style="display: none;" data-target="#myModalxc" class="btn btn-success"></button>
  <div class="modal fade" id="myModal" style="overflow:auto" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"  id="myModalLabel">设备选择</h4>
                </div>
                <div class="modal-body">
                   <loading></loading>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sbfs">发送</button>
                </div>
            </div>
        </div>
    </div>

   
   <!--模板!-->
  <div class="modal fade" id="myModalxc" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">炫彩效果选择</h4>
            </div>
            
            <div class="modal-body">
              <div class="row" id="Dazzlediv" style="margin:0px 0px;overflow:auto;height:85px;text-align:center;width: 100%;">
              <div class="col-md-2"><div  onClick="xc(0)" style="width:64px;height:64px;border: 1px solid #ddd;"><b>暂无效果</b></div>   </div>
              <div class="col-md-2"  onClick="xc(1)"><img src="static/img/1.1.gif?r=2" >炫1</div>
                <div class="col-md-2" onClick="xc(2)"><img src="static/img/2.2.gif">炫2</div>
                <div class="col-md-2" onClick="xc(3)"><img src="static/img/3.3.gif">炫3</div>
                 <!-- <div class="col-md-2" onClick="xc(4)"><img src="static/img/4.gif"></div> -->
                  <!-- <div class="col-md-2" onClick="xc(4)"><img src="static/img/4.gif"></div> -->
 
</div>
</div>
            <div class="modal-footer" style="display: none;">
               
                <button type="button" class="btn btn-primary" id="mbqd">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>



</div>
</template>
<style >
@import '../../../../static/css/mloading/jquery.mloading.css';
@import '../../../../static/css/page/Program/edit.css';
@import '../../../../static/css/ztree/metroStyle.css';
 </style>
<script>
import    '../../../../static/js/time/jquery.date_input.pack.js';
import    '../../../../static/js/drag.js';
import    '../../../../static/js/time/jquery-clock-timepicker.js';
import    '../../../../static/js/svg.js';
import    '../../../../static/js/resize.js';
import "../../../../static/js/jquery-ui-jqLoding.js"
import  '../../../../static/js/mloading/jquery.mloading.js';
import '../../../../static/js/canvas/html2canvas.js'
import loading from '@/views/tree/companydeviceselect.vue';
import week from "@/views/Page/Common/week.vue";

import    '../../../../static/js/page/Program/edit.js';
import "../../../../static/js/time/timer.js";
export default {
 data() {
  return {
  };
 },
 created () {
    
 },
 methods: {
        //坐标转换完之后的回调函数
 },
 
 mounted() {
  this.$nextTick(function() {
    //  alert( this.drawMap());
  // this.drawMap();
 });
 },
  components: {
        loading : loading,
         week: week
      }
 
};

</script>


